/*83856*/
<template>
  <div class="container ">
    <!--    <iframe src="/static/dist/index.html" frameborder="0"></iframe>-->
    <div class="topper">
      <el-row>
        <el-col :span="12">
          <div class="divCurrentWeather">
            <iframe width="450" scrolling="no" height="18" frameborder="0" allowtransparency="true"
                    src="http://i.tianqi.com/index.php?c=code&id=1&color=%23FFFFFF&icon=2&py=jinan&wind=1&num=1&site=12"></iframe>
          </div>
        </el-col>
        <el-col :span="12">
          <a target="_blank" class="toplink">APP下载</a>
        </el-col>
      </el-row>
    </div>
    <div class="loginContainer">
      <div class="lt"></div>
      <div class="rt">
        <h5>{{ sysName }}</h5>
        <el-form ref="forms" :model="form" label-width="80px">
          <el-form-item>
            <el-input id="account" v-model="form.name" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input id="password" v-model="form.pwd" placeholder="请输入登录密码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="" class="v-code">
            <el-input id="valid" v-model="form.valid" placeholder="请输入图形验证码" @keyup.enter.native="onSubmit"></el-input>
            <img id="validImg" :src="validImg" alt="看不到?请点击重试" @click="getCapTchaImage">
          </el-form-item>
          <div class="row">
            <el-checkbox v-model="checked" @change="saveChecked">记住我</el-checkbox>
          </div>
          <el-button id="submit" type="primary" class="loginBtn" @click="onSubmit">登 录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, onMounted, watch} from "vue"
import {captchaImage, noVerLogin} from "../../api/index";
import {useRouter} from 'vue-router'
import {message} from "../../utils/resetMessage";

const validImg = ref("")
const uuid = ref("")
const sysName = ref("XXX管理平台")
const checked = ref(false)
const loginLogoUrl = ref("")
const companyInfo = reactive({})
const form = reactive({
  name: '',
  pwd: '',
  valid: '',
})

onMounted(() => {
  getCapTchaImage()
})

// 记住我 读取数据
watch(() => useRouter(), (e) => {
  let toPath = e?.currentRoute.value.path
  if (toPath == '/login') {
    checked.value = localStorage.checked == 'true';
    if (checked) {
      form.name = localStorage.saveUser;
      form.pwd = localStorage.savePwd;
    }
  }
}, {immediate: true, deep: true})

const onSubmit = () => {
  if (!form.name) {
    message({
      type: 'error',
      message: '用户名不应为空'
    });
    return false
  }
  if (form.name.length > 20) {
    message({
      type: 'error',
      message: '用户名不应超过20个字符'
    });
    return false
  }
  if (!form.pwd) {
    message({
      type: 'error',
      message: '登录密码不应为空'
    });
    return false
  }
  if (form.pwd.length > 20) {
    message({
      type: 'error',
      message: '登录密码不应超过20个字符'
    });
    return false
  }

  if (process.env.NODE_ENV !== 'development' && valid.length != 4) {
    message({
      type: 'error',
      message: '图形验证码应是4个字符'
    });
    return false
  }
  loginAct();
}

// 获取验证码
const getCapTchaImage = () => {
  captchaImage({}).then((res) => {
    let json = res.data;
    validImg.value = 'data:image/jpg;base64,' + json.img;
    uuid.value = json.uuid;
  })
}

// 记住我
const saveChecked = (e: boolean) => {
  localStorage.checked = e;
  if (e) {
    localStorage.saveUser = form.name;
    localStorage.savePwd = form.pwd;
  } else {
    localStorage.saveUser = '';
    localStorage.savePwd = '';
  }
}

const loginAct = () => {
  let postdata = {
    username: form.name,
    password: form.pwd,
    code: form.valid,
    uuid: uuid,
    type: 'browser'
  };

  noVerLogin(postdata).then((res) => {
    let json = res.data;
    if (json.code === 200) {
      localStorage.userName = form.name;
      localStorage.pwd = form.pwd;
      localStorage.token = json.token;
      message({
        type: 'success',
        message: '登录成功，正在跳转到首页',
        duration: 1000
      });
      useRouter().push({
        path: '/', query: {}
      })
    } else {
      // 登录失败
      message({
        type: 'error',
        message: json.msg
      });
      // 重置验证码
      getCapTchaImage();
    }
  })
}
</script>

<style scoped lang="scss">
@import "../../assets/css/comm.scss";

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  //background: url("../../assets/image/login/logbg1.png");
  background-size: 100% 100%;

  .topper {
    @include cube;
    width: 98%;
    height: 32px;
    line-height: 32px;
    background-image: linear-gradient(rgba(15, 25, 50, .3) 0, rgba(15, 25, 50, .3) 100%);
  }
}

.toplink {
  float: right;
  font-size: 14px;
  color: #fff;
  margin-left: 2px;
}

.divCurrentWeather {
  font-size: 12px;
  padding-top: 05px;
  color: #fff;

  iframe {
    float: left;
  }
}

.loginContainer {
  @include cube;
  width: 42%;
  //width: 22%;
  display: flex;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  //margin: 13% 25%;
  margin: 10% auto;
  color: #343434;

  .lt {
    width: 50%;
    //background: url("~@/assets/image/login/logbg2.png");
    background-size: 100% 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .rt {
    width: 50%;
    //width: 100%;
    padding: 5% 7%;

    h5 {
      font-size: 26px;
      margin-bottom: 09px;
      text-align: left;
      font-weight: 400;
      color: #343434;
    }

    :deep( .el-form-item ) {
      height: 49px;
      overflow-y: hidden;

      &:nth-child(3) {
        margin-bottom: 18px;
      }
    }

    :deep( .el-form-item__content ) {
      margin-left: 0 !important;

      span {
        float: left;
      }
    }

    :deep( .el-input input) {
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 1px solid #EAEBF0 !important;
      font-size: 16px;
      line-height: 35px;
      color: #3a3f51 !important;
      padding: 0;

      &::placeholder {
        font-size: 16px;
        color: #666;
      }
    }

    :deep( .el-checkbox__inner) {
      width: 13px !important;
      height: 13px !important;
    }

    :deep( .el-checkbox__label) {
      color: #999;
    }

    .row {
      @include cube;
      height: 25px;
      margin-bottom: 15px;
      line-height: 19px;

      :deep( .el-checkbox) {
        float: left;
      }
    }

    // #validImg {
    //   position: relative;
    //   float: right;
    //   bottom: 4px;
    // }


    .loginBtn {
      @include cube;
      height: 46px !important;
      color: #fff;
      text-align: center;
      line-height: 46px !important;
      font-size: 2px;
      outline: none;
      //background: url("../../assets/image/login/logbg4.png");
      background-size: 100% 100%;
      border-radius: 2px;
      padding: 0;

      span {
        line-height: 46px;
      }
    }
  }
}

.footers {
  position: fixed;
  bottom: 25px;
  left: 0;
  right: 0;
  @include cube;
  width: auto;
  margin: 0 auto;
  height: 25px;
}

:deep( .v-code .el-form-item__content) {
  display: flex;
  justify-content: space-between;
}

iframe {
  width: 100%;
  height: 100%;
  z-index: 11;
}

.topper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.loginContainer {
  position: fixed;
  top: 6%;
  left: 0;
  right: 0;
}

.threeVersion {
  .loginContainer {
    width: 4px;
    margin: 0 auto;
    margin-top: 7%;
    display: block;
    overflow: hidden;
    background: none;
  }

  .loginContainer .lt {
    display: none;
  }

  .loginContainer .rt {
    width: 4px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    padding: 25px;
    background: rgba(255, 255, 255, 0.75);

    h5 {
      text-align: center;
    }
  }
}
</style>